<template>
    <div class="container_box">
        <el-scrollbar class="main_box">
            <div class="content">
                <div class="content-left">
                    <!-- 群发标题 -->
                    <div class="list_item">
                        <div class="item_title">
                            <span class="title_icon"></span><span class="should">*</span>群发标题
                        </div>
                        <div class="item_con">
                            <el-input
                                v-model="form.title"
                                class="item_con_input"
                                placeholder="请输入群发标题"
                                maxlength="50"
                                show-word-limit />
                        </div>
                    </div>
                    <!-- 发送客户范围 -->
                    <div class="list_item mt20">
                        <div class="item_title"><span class="title_icon"></span>发送客户范围</div>
                        <div class="item_con">
                            <el-radio-group v-model="form.cust_filter_type" @change="getMembersNum">
                                <el-radio :label="1">全部企微客户</el-radio>
                                <el-radio :label="2">指定企微客户</el-radio>
                            </el-radio-group>
                            <el-form
                                v-if="form.cust_filter_type == 2"
                                ref="formRef"
                                class="form_cus_type"
                                :model="form"
                                :rules="rules"
                                label-width="110px"
                                label-position="right">
                                <el-form-item label="添加员工">
                                    <el-select
                                        v-model="form.user_ids"
                                        :popper-append-to-body="false"
                                        class="form_item_input"
                                        popper-class="zw-hide_select_option"
                                        placeholder="选择员工"
                                        collapse-tags
                                        multiple
                                        @click="openDepart"
                                        @change="changeDepart">
                                        <el-option
                                            v-for="item in creators"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                            {{ item.name }}
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="添加时间" class="picker_item_date">
                                    <el-date-picker
                                        v-model="form.create_time"
                                        type="daterange"
                                        value-format="YYYY-MM-DD"
                                        start-placeholder="开始时间"
                                        end-placeholder="结束时间"
                                        @change="() => getChannelCustomerTotal()">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item label="客户标签" prop="target_cust_tag_type">
                                    <el-select
                                        v-model="form.target_cust_tag_type"
                                        clearable
                                        @change="() => getChannelCustomerTotal(1)">
                                        <el-option
                                            v-for="item in tagTypeList"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id"></el-option>
                                    </el-select>
                                    <el-button
                                        v-if="[1, 2, 3, 4].includes(form.target_cust_tag_type)"
                                        class="mar10"
                                        plan
                                        :icon="Plus"
                                        @click="openAddTag(1)"
                                        >添加标签</el-button
                                    ><span
                                        v-show="
                                            [1, 2, 3, 4].includes(form.target_cust_tag_type) &&
                                            form.customer_tag.length > 0
                                        "
                                        class="tag_num">
                                        已选标签
                                        <span class="tag-num">{{ form.customer_tag.length }}</span>
                                        个
                                    </span>
                                    <div>
                                        <el-tag
                                            v-for="(item, index) in form.customer_tag.slice(0, 6)"
                                            :key="index"
                                            class="tag-item"
                                            closable
                                            @close="handleTagClose(item, 1)"
                                            >{{ item.name }}</el-tag
                                        >
                                        <el-tag
                                            v-if="form.customer_tag.length > 6"
                                            class="tag-item tag-many"
                                            @click="openAddTag(1)"
                                            >...</el-tag
                                        >
                                    </div>
                                </el-form-item>
                                <el-form-item label="排除客户标签" prop="remove_target_cust_tag_type">
                                    <el-select
                                        v-model="form.remove_target_cust_tag_type"
                                        clearable
                                        @change="() => getChannelCustomerTotal(2)">
                                        <el-option
                                            v-for="item in tagExclude"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id"></el-option>
                                    </el-select>
                                    <el-button
                                        v-if="[1, 2].includes(form.remove_target_cust_tag_type)"
                                        class="mar10"
                                        plan
                                        :icon="Plus"
                                        @click="openAddTag(2)"
                                        >添加标签</el-button
                                    ><span
                                        v-show="
                                            [1, 2].includes(form.remove_target_cust_tag_type) &&
                                            form.remove_customer_tag.length > 0
                                        "
                                        class="tag_num">
                                        已选标签
                                        <span class="tag-num">{{ form.remove_customer_tag.length }}</span>
                                        个
                                    </span>
                                    <div>
                                        <el-tag
                                            v-for="(item, index) in form.remove_customer_tag.slice(0, 6)"
                                            :key="index"
                                            class="tag-item"
                                            closable
                                            @close="handleTagClose(item, 2)"
                                            >{{ item.name }}</el-tag
                                        >
                                        <el-tag
                                            v-if="form.remove_customer_tag.length > 6"
                                            class="tag-item tag-many"
                                            @click="openAddTag(2)"
                                            >...</el-tag
                                        >
                                    </div>
                                </el-form-item>
                            </el-form>
                            <div class="cus_type_0">
                                预计可触达客户数：<span>{{ customer_num }}</span> 人
                                <el-popover placement="top-start" effect="dark" :width="350" trigger="hover">
                                    <span>{{
                                        form.cust_filter_type == 1
                                            ? '优先选择归属员工触达客户，如果归属员工已不是客户好友，则选择最近添加的员工触达客户。群发时，不会重复触达客户。'
                                            : '当指定单个添加员工时，则是此员工触达客户；当指定多个员工时，若有重复客户，则先是二者中归属员工触达，若都不是则为最近添加好友的员工触达客户；未指定添加员工时，优先选择归属员工，否则选择最近添加好友的员工去触达客户。群发时，不会重复触达客户。'
                                    }}</span>
                                    <template #reference>
                                        <el-icon class="pop_icon"><question-filled /></el-icon>
                                    </template>
                                </el-popover>
                            </div>
                        </div>
                    </div>
                    <div class="list_item mt20">
                        <div class="item_title">
                            <span class="title_icon"></span><span class="should">*</span>消息内容
                            <el-popover
                                placement="top-start"
                                effect="dark"
                                :width="200"
                                trigger="hover"
                                content="注意：每位客户每天可接收1条群发消息，不限为企业发布的群发还是个人发布的群发。">
                                <template #reference>
                                    <el-icon class="pop_icon"><question-filled /></el-icon>
                                </template>
                            </el-popover>
                        </div>
                        <MaterialContent
                            ref="materialContentRef"
                            :max-num="9"
                            :input-content-tabs="inputContentTabs"
                            :show-material-tabs="showMaterialTabs"
                            :input-content-data="inputContentData"
                            :material-content-data="materialContentData"
                            @change="changeMaterial" />
                    </div>
                    <!-- 群发时间设定 -->
                    <div class="list_item mt20">
                        <div class="item_title"><span class="title_icon"></span>群发时间设定</div>
                        <div class="item_con item_time">
                            <el-radio-group v-model="form.sync_wx_type">
                                <el-radio :label="1">立即发送</el-radio>
                                <el-radio :label="2">指定时间发送 </el-radio>
                            </el-radio-group>
                            <el-date-picker
                                v-if="form.sync_wx_type == 2"
                                v-model="form.sync_wx_time"
                                format="YYYY-MM-DD HH:mm:ss"
                                value-format="YYYY-MM-DD HH:mm:ss"
                                :disabled-date="disabledDate"
                                type="datetime"
                                placeholder="请选择下发时间" />
                        </div>
                    </div>
                </div>
                <div class="content-right">
                    <div class="title">消息内容预览</div>
                    <PhonePreview ref="phonePreviewRef" />
                </div>
            </div>
            <!-- 部门人员弹框 -->
            <ZWDepart ref="DepartRef" :type="1" @submit="getDepart" />
            <!--打标签弹框-->
            <ZwBatchLabel ref="BatchLabelRef" @save="handleSubmitTag"></ZwBatchLabel>
        </el-scrollbar>
        <div class="footer_box">
            <el-button @click="resetForm">重置</el-button>
            <el-button type="primary" @click="noticeSend">通知员工发送</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import ZWDepart from '@/components/ZWDepart.vue';
import MaterialContent from '@/components/zw/materialContent/index.vue';
import PhonePreview from '@/components/zw/phonePreview/welcomePhonePreview/materialPreview/index.vue';
import { getSetionId, IsNotEmpty, initMaterialData } from '@/utils/utils';
import { createCustomer, filterChannelCustomer, customerInfo } from '@/api/channel/index';
import { ElMessage } from 'element-plus';
import router from '@/router';
import dayjs from 'dayjs';
import { Plus } from '@element-plus/icons-vue';

const route = useRoute();
const routerParams = route.query;
const DepartRef = ref(null);
const formRef = ref(null);
const newArr = ref([]);
const creators = ref([]);
// 条件参数
const cust_filter_json = ref({});
const customer_num = ref(0);

const materialContentRef = ref<HTMLElement | null>();
const phonePreviewRef = ref<HTMLElement | null>();
const inputContentTabs = ref<Array<number>>([1, 2, 3]); // 配置欢迎语输入框选项
const showMaterialTabs = ref<Array<string>>(['1', '2', '3', '4', '5', '6', '7', '9', '11', '10']); // 配置选择素材组件类型
const inputContentData = ref<string>(''); //  用户存放回显数据  欢迎语输入框
const materialContentData = ref<Array<any>>([]); //  用户存放回显数据  欢迎语素材
const materialResult = ref<any>(null); // 欢迎语组件返回的数据（可直接用于接口请求）
const BatchLabelRef = ref(null);

const tagType = ref(1);
const form = reactive({
    title: '',
    cust_filter_type: 1,
    user_ids: [],
    create_time: [],
    customer_tag: [],
    remove_customer_tag: [],
    content: '',
    sync_wx_type: 1,
    sync_wx_time: '',
    target_cust_tag_type: '',
    remove_target_cust_tag_type: ''
});
const fileList = ref([]);
const tagExclude = ref([
    {
        id: 1,
        name: '包含以下任一标签'
    },
    {
        id: 2,
        name: '包含以下所有标签'
    },
    {
        id: 3,
        name: '标签为空'
    }
]);
const tagTypeList = ref([
    {
        id: 1,
        name: '包含以下任一标签'
    },
    {
        id: 2,
        name: '包含以下所有标签'
    },
    {
        id: 3,
        name: '不包含以下任一标签'
    },
    {
        id: 4,
        name: '不包含以下所有标签'
    },
    {
        id: 5,
        name: '标签为空'
    },
    {
        id: 6,
        name: '标签不为空'
    }
]);
// 自定义校验客户标签
const validateCustType = (rule: any, value: any, callback: any) => {
    if (form.cust_filter_type == 2) {
        if ([1, 2, 3, 4].includes(value) && form.customer_tag.length == 0) {
            callback(new Error('请至少添加一个标签'));
        } else {
            callback();
        }
    } else {
        callback();
    }
};
// 自定义校验排除客户标签
const validateRemoveTag = (rule: any, value: any, callback: any) => {
    if (form.cust_filter_type == 2) {
        if ([1, 2].includes(value) && form.remove_customer_tag.length == 0) {
            callback(new Error('请至少添加一个标签'));
        } else {
            callback();
        }
    } else {
        callback();
    }
};
const rules = reactive({
    target_cust_tag_type: { validator: validateCustType, trigger: 'blur' },
    remove_target_cust_tag_type: { validator: validateRemoveTag, trigger: 'blur' }
});

const disabledDate = (date: Date) => {
    return dayjs(date).isBefore(dayjs(), 'day');
};

//打开新建选择人
const openDepart = () => {
    DepartRef.value.appDialog.title = '选择员工';
    DepartRef.value.departVisble = true;
    DepartRef.value.selectedMember = creators.value;
};
/**
 * 获取部门成员
 * 不同部门同一个员工，需要先去重
 */
const getDepart = (res: any) => {
    let reduce = [];
    const obj = {};
    reduce = res?.reduce((item: any, next: any) => {
        obj[next.id] ? '' : (obj[next.id] = true && item.push(next));
        return item;
    }, []);
    creators.value = reduce;
    form.user_ids = getSetionId('id', creators.value);
    getChannelCustomerTotal();
};
// 删除部门成员
const changeDepart = (data: any) => {
    const removeDepart = creators.value.find((item: any) => !data.includes(item.id));
    const arr: any[] = creators.value.filter((item: any) => data.includes(item.id));
    form.user_ids = getSetionId('id', arr);
    creators.value = arr;
    DepartRef.value.removeItem(removeDepart);
    getChannelCustomerTotal();
};

// 重置
const resetForm = () => {
    fileList.value = [];
    form.title = '';
    form.cust_filter_type = 1;
    form.user_ids = [];
    form.create_time = [];
    form.customer_tag = [];
    form.remove_customer_tag = [];
    form.content = '';
    form.sync_wx_type = 1;
    form.sync_wx_time = '';
    form.target_cust_tag_type = '';
    form.remove_target_cust_tag_type = '';
    creators.value = [];
    newArr.value = [];
    DepartRef.value.removeItem(form.user_ids);
    materialContentRef.value.clearInput();
    materialContentRef.value.clearMaterial();
};

// 预计可触发客户多少人
const getChannelCustomerTotal = (val?: any) => {
    if (val == 1) {
        formRef.value.clearValidate('target_cust_tag_type');
        if ([5, 6].includes(form.target_cust_tag_type) || form.target_cust_tag_type == '') {
            form.customer_tag = [];
        }
    }
    if (val == 2) {
        formRef.value.clearValidate('remove_target_cust_tag_type');
        if ([3].includes(form.remove_target_cust_tag_type) || form.remove_target_cust_tag_type == '') {
            form.remove_customer_tag = [];
        }
    }
    cust_filter_json.value = {
        work_user: [],
        work_department: [],
        create_time: IsNotEmpty(form.create_time) ? form.create_time[0] + '~' + form.create_time[1] : '',
        customer_tag: [],
        remove_customer_tag: [],
        target_cust_tag_type: form.target_cust_tag_type,
        remove_target_cust_tag_type: form.remove_target_cust_tag_type
    };
    const params = {
        work_user: [],
        work_department: [],
        create_time: IsNotEmpty(form.create_time) ? form.create_time[0] + '~' + form.create_time[1] : '',
        customer_tag: [],
        remove_customer_tag: [],
        target_cust_tag_type: form.target_cust_tag_type,
        remove_target_cust_tag_type: form.remove_target_cust_tag_type
    };

    // 客户标签
    if (form.customer_tag.length > 0) {
        form.customer_tag.forEach((item: any) => {
            params.customer_tag.push(item.id);
            cust_filter_json.value.customer_tag.push({
                name: item.name,
                id: item.id
            });
        });
    }
    // 排除标签
    if (form.remove_customer_tag.length > 0) {
        form.remove_customer_tag.forEach((item: any) => {
            params.remove_customer_tag.push(item.id);
            cust_filter_json.value.remove_customer_tag.push({
                name: item.name,
                id: item.id
            });
        });
    }
    // 添加员工
    if (creators.value.length > 0) {
        creators.value.forEach((item: any) => {
            //部门
            if (item.type == 'department') {
                params.work_department.push(item.id);
                cust_filter_json.value.work_department.push({
                    name: item.name,
                    id: item.id
                });
            } else {
                // 成员
                cust_filter_json.value.work_user.push({
                    name: item.name,
                    id: item.id
                });
                params.work_user.push(item.id);
            }
        });
    }

    // 参数至少一个不为空 按条件查询
    const flag = Object.keys(params).some((key: string) => {
        return IsNotEmpty(params[key]);
    });
    if (!flag && form.cust_filter_type == 2) return;
    if ([1, 2, 3, 4].includes(form.target_cust_tag_type) && form.customer_tag.length == 0) return;
    if ([1, 2].includes(form.remove_target_cust_tag_type) && form.remove_customer_tag.length == 0) return;
    params.cust_filter_type = form.cust_filter_type;
    filterChannelCustomer(params).then((res: any) => {
        customer_num.value = res.customer_num;
    });
};
// 切换人员信息
const getMembersNum = (val: any) => {
    getChannelCustomerTotal();
};

const changeMaterial = (val: any) => {
    materialResult.value = val;
};

// 通知员工发送
const noticeSend = () => {
    delete cust_filter_json.value.cust_filter_type;
    const params = {
        ...materialResult.value,
        title: form.title,
        cust_filter_type: form.cust_filter_type,
        cust_filter_json: cust_filter_json.value,
        retail_material: [],
        sync_wx_type: form.sync_wx_type,
        sync_wx_time: form.sync_wx_time ? dayjs(form.sync_wx_time).format('YYYY-MM-DD HH:mm:ss') : ''
    };

    if (!form.title) {
        ElMessage.warning('请输入群发标题');
        return;
    }
    if (!materialResult.value?.welcome_info?.welcome_text) {
        ElMessage.warning('请输入消息内容');
        return;
    }

    if (form.cust_filter_type == 2) {
        // 参数至少一个不为空 按条件查询
        const flag = Object.keys(cust_filter_json.value).some((key: string) => {
            return IsNotEmpty(cust_filter_json.value[key]);
        });
        if (!flag) {
            ElMessage.warning('条件筛选客户请至少选择一个条件');
            return;
        }
    } else {
        delete params.cust_filter_json;
    }

    if (form.sync_wx_type == 1) {
        form.sync_wx_time = '';
        delete params.sync_wx_time;
    } else {
        if (!form.sync_wx_time) {
            ElMessage.warning('请选择发送时间');
            return;
        }
    }
    if (form.cust_filter_type == 2) {
        formRef.value.validate((valid: boolean) => {
            if (valid) {
                creatCust(params);
            }
        });
    } else {
        creatCust(params);
    }
};
// 创建客户群发
const creatCust = (val: any) => {
    createCustomer(val).then((res: any) => {
        ElMessage.success(`创建成功`);
        router.back();
    });
};
// 打开标签弹框
const openAddTag = (val: any) => {
    tagType.value = val;
    BatchLabelRef.value.chooseDataArr = val == 1 ? [...form.customer_tag] : [...form.remove_customer_tag];
    BatchLabelRef.value.dialogVisible = true;
    BatchLabelRef.value.title = '选择标签';
    BatchLabelRef.value.hasConditiion = false;
};
// 删除标签
const handleTagClose = (val: any, type: any) => {
    if (type == 1) {
        form.customer_tag = form.customer_tag.filter((item: any) => item.id != val.id);
    } else {
        form.remove_customer_tag = form.remove_customer_tag.filter((item: any) => item.id != val.id);
    }
    getChannelCustomerTotal();
};
// 确认标签
const handleSubmitTag = (val: any) => {
    if (tagType.value == 1) {
        form.customer_tag = val.data;
        formRef.value.clearValidate('target_cust_tag_type');
    } else {
        form.remove_customer_tag = val.data;
        formRef.value.clearValidate('remove_target_cust_tag_type');
    }
    getChannelCustomerTotal();
};

/**
 * @description: 初始化回显数据（复制）
 * @return {*}
 */
const initData = async () => {
    if (routerParams?.id) {
        const res: any = await customerInfo({ send_msg_id: routerParams?.id });
        const { title, cust_filter_type, cust_filter_json, sync_wx_type, sync_wx_time, welcome_info } = res;
        form.title = `${title}副本`;
        // cust_filter_type 客户范围 1-全部客户 2-条件筛选
        form.cust_filter_type = cust_filter_type;
        if (cust_filter_type === 2) {
            cust_filter_json.value = cust_filter_json;
            const {
                work_user,
                create_time,
                target_cust_tag_type,
                customer_tag,
                remove_target_cust_tag_type,
                remove_customer_tag
            } = cust_filter_json;
            if (work_user?.length) {
                creators.value.splice(0);
                creators.value.push(...work_user);
                const user_ids = work_user.map(item => item.id);
                form.user_ids.splice(0);
                form.user_ids.push(...user_ids);
            }
            if (create_time) {
                form.create_time.splice(0);
                form.create_time.push(...create_time.split('~'));
            }
            form.target_cust_tag_type = target_cust_tag_type;
            if ([1, 2, 3, 4].includes(target_cust_tag_type) && customer_tag.length) {
                form.customer_tag.splice(0);
                form.customer_tag.push(...customer_tag);
            }
            form.remove_target_cust_tag_type = remove_target_cust_tag_type;
            if ([1, 2, 3, 4].includes(remove_target_cust_tag_type) && remove_customer_tag.length) {
                form.remove_customer_tag.splice(0);
                form.remove_customer_tag.push(...remove_customer_tag);
            }
        }
        // sync_wx_type 群发时间设定 1-立刻发送 2-指定时间发送
        form.sync_wx_type = sync_wx_type;
        if (sync_wx_type === 2) {
            form.sync_wx_time = sync_wx_time;
        }
        if (welcome_info?.welcome_text) inputContentData.value = welcome_info?.welcome_text;
        if (welcome_info?.welcome_material?.length)
            materialContentData.value = initMaterialData(welcome_info?.welcome_material);
    }
};

onMounted(async () => {
    await initData();
    getChannelCustomerTotal();
});
</script>
<style lang="scss" scoped>
.create_content {
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #eaeaea;
    display: flex;
    padding: 30px;

    .content_box {
        width: 700px;
        border-right: 1px solid #eaeaea;
        box-sizing: border-box;
        padding-right: 40px;
        padding-left: 10px;

        .list_item {
            padding-left: 18px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eaeaea;

            .item_title {
                font-size: 14px;
                line-height: 18px;
                font-family: STHeitiSC-Medium, STHeitiSC;
                font-weight: 500;
                color: #33302d;
                margin-bottom: 16px;

                .title_icon {
                    display: block;
                    height: 18px;
                    width: 3px;
                    background: #ff6b00;
                    float: left;
                    margin-left: -15px;
                }
            }

            .item_con_input {
                width: 470px;
            }

            .item_con {
                .cus_type_0 {
                    margin-top: 20px;
                    font-size: 14px;
                    font-family: STHeitiSC-Light, STHeitiSC;
                    font-weight: 300;
                    color: #33302d;

                    span {
                        color: #ff6b00;
                    }
                }

                .form_cus_type {
                    margin-top: 5px;

                    .el-form-item__content {
                        .form_item_input {
                            .el-input__inner {
                                width: 253px !important;
                            }
                        }
                    }

                    .picker_item_date {
                        :deep .el-form-item__content {
                            .el-input__inner {
                                width: 217px !important;
                            }
                        }
                    }
                }
            }
        }

        .btn_form_box {
            margin-top: 12px;
            text-align: right;
        }
    }

    .mt20 {
        margin-top: 20px;
    }

    .ml10 {
        margin-left: 10px;
    }

    .pad12 {
        padding: 0 12px;
    }
}

.content {
    padding: 24px;
    box-sizing: border-box;
    display: flex;

    .content-left {
        flex: 1;
        padding-right: 48px;
        border-right: 1px solid #eee;

        .list_item {
            padding-left: 1.125rem;
            padding-bottom: 24px;
            border-bottom: 0.0625rem solid #eaeaea;

            &:last-of-type {
                border-bottom: none;
            }

            .item_title {
                font-size: 0.875rem;
                line-height: 1.125rem;
                font-family: STHeitiSC-Medium, STHeitiSC;
                font-weight: 500;
                color: #33302d;
                margin-bottom: 12px;

                .title_icon {
                    display: block;
                    height: 1.125rem;
                    width: 0.1875rem;
                    background: #ff6b00;
                    float: left;
                    margin-left: -0.9375rem;
                }
            }

            .item_con_input {
                width: 29.375rem;
            }

            .item_con {
                .cus_type_0 {
                    margin-top: 1.25rem;
                    font-size: 0.875rem;
                    font-family: STHeitiSC-Light, STHeitiSC;
                    font-weight: 300;
                    color: #33302d;

                    span {
                        color: #ff6b00;
                    }
                }

                .form_cus_type {
                    margin-top: 0.3125rem;

                    .el-form-item__content {
                        .form_item_input {
                            .el-input__inner {
                                width: 15.8125rem !important;
                            }
                        }
                    }
                }
            }

            .item_time {
                display: flex;
                align-items: center;
                gap: 12px;
            }
        }

        .mt20 {
            margin-top: 1.25rem;
        }
    }

    .pop_icon {
        vertical-align: middle;
        margin-top: -2px;
        color: #fff;
        background: #969696;
        border-radius: 50%;
    }

    .content-right {
        padding: 0 24px 0 48px;

        .title {
            text-align: center;
            line-height: 3.5;
            font-size: 14px;
            color: #333;
        }
    }
}

.bottom-btns {
    .btns {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.mar10 {
    margin: 0 10px;
}

.tag-item {
    margin: 2px 5px;
}

.tag-many {
    cursor: pointer;
}

.tag-num {
    font-size: 16px;
    font-weight: 600;
}

.should {
    display: inline-block;
    color: red;
    margin-right: 3px;
}

.tag_num {
    white-space: nowrap;
}
</style>
